Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: Email Link and Phone Link (in Action Block) #236

Merged
merged 4 commits into from
Feb 4, 2025

Conversation

jbmoelker
Copy link
Member

@jbmoelker jbmoelker commented Dec 28, 2024

Important

Depends on #234, which should be merged first.

Changes

  • Adds Email Link to easily send an email (with optional subject and body text).
  • Adds Phone Link to easily start phone call, send sms (with optional text) or contact via WhatsApp (with optional message).

Associated issue

N/A

How to test

  1. Open preview link
  2. Navigate to Action Block demo > "Action block with Email Links" section
  3. Verify all variations (mailto only, with subject, with subject + body) work
  4. Navigate to Action Block demo > "Action block with Phone Links" section
  5. Verify all variations (call, sms, whatsapp) work (best to check on both Android and iOS)
  6. Go the the email-and-phone-links environment and play around with the new Email Link and Phone Link option in Action Blocks
  7. Verify changes made are reflected in the web page (note: run locally as changes are not updated on deploy preview)

Checklist

  • I have performed a self-review of my own code
  • I have made sure that my PR is easy to review (not too big, includes comments)
  • I have made updated relevant documentation files (in project README, docs/, etc)
  • I have added a decision log entry if the change affects the architecture or changes a significant technology
  • I have notified a reviewer

Copy link

cloudflare-workers-and-pages bot commented Dec 28, 2024

Deploying head-start with  Cloudflare Pages  Cloudflare Pages

Latest commit: 0cad1ab
Status: ✅  Deploy successful!
Preview URL: https://e9d89536.head-start.pages.dev
Branch Preview URL: https://feat-email-and-phone-links.head-start.pages.dev

View logs

@jbmoelker jbmoelker marked this pull request as ready for review December 28, 2024 19:53
field_type: 'string',
api_key: 'phone_number',
hint: 'Best to use international notation: +31 20 2610954',
validators: { required: {} },
Copy link
Member Author

@jbmoelker jbmoelker Jan 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could add more validation here, but validating phone numbers can be tricky. Editors can also just try if the number the entered, works in the preview.

Even more nice to have would be a Phone Input Field as a DatoCMS plugin. We could create that based on react-phone-number-input. Pinging @velomovies ;)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would even go as far as saying this feature can be implemented just by adding a plugin, right? They're all links..

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MarleenEliza mentioned that my assumption was incorrect, mailto: etc are note valid URLs according to Dato.

export type Props = HTMLAttributes<'a'> & PhoneLinkProps;
const { action, phoneNumber, text, ...props } = Astro.props;

const formatPhoneNumber = (phoneNumber: string) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit of a naive formatter. Could pull in the very popular libphonenumber-js package (has zero dependencies) to do the phone number formatting:

@jurgenbelien jurgenbelien force-pushed the feat/email-and-phone-links branch from eeb8b8f to 7e754d0 Compare February 4, 2025 15:28
@jurgenbelien jurgenbelien self-requested a review February 4, 2025 15:33
@jurgenbelien jurgenbelien force-pushed the feat/email-and-phone-links branch from 7e754d0 to 0cad1ab Compare February 4, 2025 15:52
Copy link
Contributor

@jurgenbelien jurgenbelien left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved an issue with the encoding of the email. Should be good now

@jurgenbelien jurgenbelien merged commit 235f004 into main Feb 4, 2025
5 checks passed
@jurgenbelien jurgenbelien deleted the feat/email-and-phone-links branch February 4, 2025 16:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants